"use client";

import React, { useMemo, useState } from "react";
import { AgGridReact } from "ag-grid-react";
import {
    AllCommunityModule,
    themeQuartz,
    ClientSideRowModelModule,
    ModuleRegistry,
    ValidationModule,
} from "ag-grid-community";
import {
    ColumnMenuModule,
    ColumnsToolPanelModule,
    ContextMenuModule,
    FiltersToolPanelModule,
    LicenseManager,
    PivotModule,
    RowGroupingPanelModule,
} from "ag-grid-enterprise";

// 导入中文本地化文本
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';

// 导入自定义 Hook
import { useFetchJson } from "./useFetchJson";
// 导入配置管理工具
import { agGridConfig, validateConfig } from "../../utils/config";

// 注册 ag-grid 模块
ModuleRegistry.registerModules([
    AllCommunityModule,
    ClientSideRowModelModule,
    ColumnsToolPanelModule,
    ColumnMenuModule,
    ContextMenuModule,
    PivotModule,
    FiltersToolPanelModule,
    RowGroupingPanelModule,
    ValidationModule /* 仅开发环境使用 */,
]);

// 验证配置并设置许可证密钥
validateConfig();
if (agGridConfig.licenseKey) {
    LicenseManager.setLicenseKey(agGridConfig.licenseKey);
} else {
    console.warn('ag-Grid 许可证密钥未配置，请检查环境变量 NEXT_PUBLIC_AG_GRID_LICENSE_KEY');
}

/**
 * ag-Grid 示例组件 - JavaScript 版本
 * 展示如何使用 ag-Grid 创建数据透视表和分组功能
 */
const GridExample = () => {
    // 容器样式配置
    const containerStyle = useMemo(() => ({
        width: "100%",
        height: "100%"
    }), []);

    // 网格样式配置
    const gridStyle = useMemo(() => ({
        height: "100%",
        width: "100%"
    }), []);

    // 中文本地化文本
    const localeText = AG_GRID_LOCALE_CN;

    // 自定义主题配置 - 深色主题
    const myTheme = themeQuartz
        .withParams({
            backgroundColor: "#1f2836",        // 背景色
            browserColorScheme: "dark",        // 浏览器颜色方案
            chromeBackgroundColor: {
                ref: "foregroundColor",
                mix: 0.07,
                onto: "backgroundColor"
            },
            foregroundColor: "#FFF",           // 前景色（文字颜色）
            headerFontSize: 14                 // 表头字体大小
        });

    // 列定义配置
    const [columnDefs] = useState([
        {
            field: "country",
            rowGroup: true,                    // 按国家分组
            headerName: "国家"
        },
        {
            field: "sport",
            pivot: true,                       // 体育项目作为透视列
            headerName: "体育项目"
        },
        {
            field: "year",
            pivot: true,                       // 年份作为透视列
            headerName: "年份"
        },
        {
            field: "gold",
            aggFunc: "sum",                    // 金牌数量求和
            headerName: "金牌总数"
        },
    ]);

    // 默认列配置
    const defaultColDef = useMemo(() => {
        return {
            flex: 1,                           // 弹性宽度
            minWidth: 130,                     // 最小宽度
            enableValue: true,                 // 启用值显示
            enableRowGroup: true,              // 启用行分组
            enablePivot: true,                 // 启用透视功能
            filter: true,                      // 启用过滤功能
        };
    }, []);

    // 自动分组列配置
    const autoGroupColumnDef = useMemo(() => {
        return {
            minWidth: 200,                     // 最小宽度
            pinned: "left",                    // 固定在左侧
        };
    }, []);

    // 获取奥运会数据 - 使用配置管理工具
    const { data, loading } = useFetchJson(agGridConfig.dataUrl);

    return (
        <div style={containerStyle}>
            <div style={gridStyle}>
                <AgGridReact
                    rowData={data}                 // 行数据
                    loading={loading}              // 加载状态
                    columnDefs={columnDefs}        // 列定义
                    defaultColDef={defaultColDef}  // 默认列配置
                    autoGroupColumnDef={autoGroupColumnDef}  // 自动分组列配置
                    pivotMode={true}               // 启用透视模式
                    sideBar={['columns', 'filters']}            // 侧边栏显示列面板
                    pivotPanelShow={"always"}      // 始终显示透视面板
                    localeText={localeText}        // 本地化文本
                    theme={myTheme}                // 主题配置
                />
            </div>
        </div>
    );
};

export default GridExample; 